import 'package:flutter/material.dart';

import 'package:wallpaper/components/avatar.dart';
import 'package:wallpaper/model/mohu_types.dart';
import 'package:wallpaper/model/options_base.dart';
import 'package:wallpaper/pages/navbar/child/mohu_list.dart';

class MohuPage extends StatefulWidget {
  const MohuPage({super.key});

  @override
  State<MohuPage> createState() => _MohuPageState();
}

class _MohuPageState extends State<MohuPage> with TickerProviderStateMixin {
  List types = [];
  List childTypes = [];
  List<Widget> subList = [];
  late TabController tabController;
  int activeIndex = 0;
  PageController pageController = PageController(initialPage: 0);

  void getTypes() {
    setState(() {
      types = MohuTypes().types;
      for (var item in types) {
        subList.add(
          Padding(
            padding: const EdgeInsets.only(bottom: 3),
            child: Text(
              item['label'],
              style: TextStyle(fontSize: OptionsBase().tagSize),
            ),
          ),
        );
      }
    });
  }

  @override
  void initState() {
    getTypes();
    super.initState();
    tabController = TabController(length: subList.length, vsync: this);
    tabController.addListener(() {
      setState(() {
        activeIndex = tabController.index;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        toolbarHeight: 40,
        backgroundColor: Theme.of(context).colorScheme.primaryContainer,
        surfaceTintColor: Theme.of(context).colorScheme.primaryContainer,
        elevation: 0,
        title: Row(
          children: [
            Avatar(),
            SizedBox(width: 10),
            Expanded(
              child: TabBar(
                tabs: subList,
                dividerColor: Colors.transparent,
                labelColor: Theme.of(context).colorScheme.primary,
                unselectedLabelColor: Theme.of(context).colorScheme.onSurface,
                controller: tabController,
                isScrollable: true,
                tabAlignment: TabAlignment.start, // 元素对齐方式
                indicatorPadding: const EdgeInsets.all(0), // 调整指示器的内边距
                indicatorSize: TabBarIndicatorSize.label, // 使用标签的宽度
                onTap: (index) {
                  pageController.animateToPage(
                    index,
                    duration: const Duration(milliseconds: 500),
                    curve: Curves.ease,
                  );
                },
              ),
            ),
          ],
        ),
      ),
      body: Column(
        children: [
          Expanded(
              child: PageView(
            controller: pageController,
            children: [
              MohuList(types: types[0]['children']),
              MohuList(types: types[1]['children']),
              MohuList(types: types[2]['children']),
              MohuList(types: types[3]['children']),
              MohuList(types: types[4]['children']),
              MohuList(types: types[5]['children']),
            ],
            onPageChanged: (index) {
              setState(() {
                activeIndex = index;
              });
              tabController.animateTo(index);
            },
          ))
        ],
      ),
    );
  }
}
